 <template>
  <div>
    <div class="aaa">

      <!-- 上传excel的对话框 -->
      <el-dialog title="上传客户信息Excel" :visible.sync="dialogExcelVisible" width="40%">
        <el-upload
          class="upload-demo"
          drag
          action="http://localhost:8088/tree/excel"
          accept=".xlsx,.xls"
          :on-success="uploadExcelSuccess"
          :on-error="uploadExcelError"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
        </el-upload>
      </el-dialog>


      <el-tabs v-model="activeName" @tab-click="handleClick"   >
        <el-tab-pane label="用户管理" name="first"  >
          <div>
            <h1 align="center" style="color: blue">客户管理</h1>
            <el-form :inline="true" :model="keyword" class="demo-form-inline" ref="searchForm">
              <el-form-item label="联系人" prop="cliId" >
                <el-input size="small" clearable v-model="keyword.cliName" placeholder="联系人" ></el-input>
              </el-form-item>
              <el-form-item label="客户名称" prop="cliKh">
                <el-input size="small" clearable v-model="keyword.cliKh" placeholder="客户名称"></el-input>
              </el-form-item>
              <el-form-item label="客户类别" >
                <el-select v-model="keyword.cliCategory" placeholder="请选择客户类别" @change="search">
                  <el-option v-for="roleType in List3" :label="roleType" :value="roleType" >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-button type="primary" size="small"  @click="search" icon="el-icon-search">查询</el-button>
              <el-button size="small" icon="el-icon-refresh" @click="resetsearchForm('searchForm')">重置</el-button>
              <el-button type="success" size="small"  @click="daochu" icon="el-icon-upload2">导出</el-button>
              <el-button type="success" size="small"  @click="dialogExcelVisible=true" icon="el-icon-download">导人</el-button>
              <span style="margin-left: 100px">
              <el-button type="primary" @click="openAddDialog" icon="el-icon-plus" >添加</el-button>
              <el-button type="danger" @click="deletebatches" >批量删除</el-button  >
                </span>
            </el-form>
            <el-table v-loading="loading" :data="clientList" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
              <el-table-column type="selection" width="55" align="center" />
              <el-table-column label="客户编号" align="center" prop="cliId" />
              <el-table-column label="客户名称" align="center" prop="cliKh" />
              <el-table-column label="联系人" align="center" prop="cliName"/>
              <el-table-column label="联系电话" align="center" prop="cliPhone" />
              <el-table-column label="联系地址" align="center" prop="cliHome" />
              <el-table-column label="客户类别" align="center" prop="cliCategory" />
              <el-table-column label="客户等级" align="center" prop="cliGrade" />
              <el-table-column label="关联业务员" align="center" prop="cliSalesman" />
              <el-table-column label="主彩项目" align="center" prop="cliProject" />
              <el-table-column label="创建时间" align="center" prop="cliTime" />
              <el-table-column label="结算方式" align="center" prop="cliAccounts" />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-edit"
                    @click="handleEdit(scope.row)">更新</el-button>
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handleDelete(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!--    分页模块-->
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 8, 10]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="添加客户" name="second" >
          <h1 align="center" style="color:firebrick">添加客户</h1>
          <el-form  :model="client" label-width="150px"  :rules="clientRules" ref="itemTypeRulesForm">
            <el-form-item label="客户名称：" prop="cliKh">
              <el-input v-model="client.cliKh" style="width: 500px" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人：" prop="cliName">
              <el-input v-model="client.cliName" style="width: 500px" placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="cliPhone">
              <el-input v-model="client.cliPhone" style="width: 500px" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="客户类型：" prop="cliCategory">
              <el-input v-model="client.cliCategory" style="width: 500px" placeholder="客户类型"></el-input>
            </el-form-item>
            <el-form-item label="客户等级：" >
              <el-input v-model="client.cliGrade" style="width: 500px" placeholder="客户等级"></el-input>
            </el-form-item>
            <el-form-item label="结算方式" >
              <el-select v-model="client.cliAccounts" placeholder="请选择结算方式">
                <el-option v-for="roleType in List" :label="roleType" :value="roleType">
                </el-option>
              </el-select>
            </el-form-item>
              <el-form-item label="业务员" >
                  <el-select v-model="client.cliSalesman" placeholder="请选择业务员">
                      <el-option v-for="roleType1 in List1" :label="roleType1" :value="roleType1">
                      </el-option>
                  </el-select>
              </el-form-item>
            <el-form-item label="详细地址">
              <el-select v-model="a" placeholder="请选择所属区域">
                <el-option label="河南省" value="河南省"></el-option>
                <el-option label="广东省" value="广东省"></el-option>
              </el-select>
              <el-select v-model="b" placeholder="请选择所属区域">
                <el-option label="郑州" value="郑州"></el-option>
                <el-option label="深圳" value="深圳"></el-option>
              </el-select>
              <el-select v-model="c" placeholder="请选择所属区域">
                <el-option label="金水区" value="金水区"></el-option>
                <el-option label="龙岗区" value="龙港区"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址：">
              <el-input v-model="client.cliHome"  placeholder="详细地址"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="client.cliTime" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>


            <el-form-item label="主采购类目">
              <el-radio-group v-model="client.cliProject">
                <el-radio label="海鲜水产"></el-radio>
                <el-radio label="肉类"></el-radio>
                <el-radio label="米面粮油"></el-radio>
                <el-radio label="时令水果"></el-radio>
                <el-radio label="豆制品"></el-radio>
                <el-radio label="新鲜蔬菜"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('itemTypeRulesForm')">立即添加</el-button>
              <el-button type="primary" @click="onlot">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="更新用户" name="up" :disabled="xianshi">
          <h1 align="center" style="color:rebeccapurple">更新用户</h1>
          <el-form  :model="client" label-width="100px"  :rules="clientRules1" ref="itemTypeRulesForm">
            <el-form-item label="客户名称：" prop="cliKh">
              <el-input v-model="client.cliKh" style="width: 500px" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人：" prop="cliName">
              <el-input v-model="client.cliName" style="width: 500px" placeholder="联系人"></el-input>
            </el-form-item>
            <el-form-item label="手机号：" prop="cliPhone">
              <el-input v-model="client.cliPhone" style="width: 500px" placeholder="手机号"></el-input>
            </el-form-item>
            <el-form-item label="客户类型：" prop="cliCategory">
              <el-input v-model="client.cliCategory" style="width: 500px" placeholder="客户类型"></el-input>
            </el-form-item>
            <el-form-item label="详细地址">
              <el-select v-model="a" placeholder="请选择所属区域">
                <el-option label="河南省" value="河南省"></el-option>
                <el-option label="广东省" value="广东省"></el-option>
              </el-select>
              <el-select v-model="b" placeholder="请选择所属区域">
                <el-option label="郑州" value="郑州"></el-option>
                <el-option label="深圳" value="深圳"></el-option>
              </el-select>
              <el-select v-model="c" placeholder="请选择所属区域">
                <el-option label="金水区" value="金水区"></el-option>
                <el-option label="龙岗区" value="龙港区"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="详细地址：">
              <el-input v-model="client.cliHome"  placeholder="详细地址"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="client.cliTime" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>

            <el-form-item label="主采购类目">
              <el-radio-group v-model="client.cliProject">
                <el-radio label="海鲜水产"></el-radio>
                <el-radio label="肉类"></el-radio>
                <el-radio label="米面粮油"></el-radio>
                <el-radio label="时令水果"></el-radio>
                <el-radio label="豆制品"></el-radio>
                <el-radio label="新鲜蔬菜"></el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="update1('itemTypeRulesForm')">立即更新</el-button>
              <el-button type="primary" @click="onlot1">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {getList,getdel,delBatch,add1,up1,findjs,findywy,find3} from '@/api/tree'
export default {
  data(){
    return{
      dialogExcelVisible:false,
      xianshi:true,
      activeName:'first',
      loading:true,
      //查全部定义的数组
      clientList:[{}],
      ids:[],
      pageNum:1,
      pageSize:8,
      currentPage:1,
      total:0,
      keyword:{
        cliName:null,
        cliKh:null,
        cliCategory:null
      },
      List:[],
      List1:[],
      List3:[],
      a:'',
      b:'',
      c:'',
      client: {
        cliKh: null,
        cliName: null,
        cliPhone: null,
        cliCategory: null,
        cliHome: null,
        cliTime: null,
        cliProject: null,
        cliAccounts:null,
        cliGrade:null,
        cliSalesman:null

      },
      clientRules:{
        cliKh:[
          { required: true, message: '客户名称不能为空', trigger: 'blur' },
        ],
        cliName:[
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        cliPhone:[
          { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
        ],
        cliCategory:[
          { required: true, message: '客户等级不能为空', trigger: 'blur' },
        ]
      },
      clientRules1:{
        cliKh:[
          { required: true, message: '客户名称不能为空', trigger: 'blur' },
        ],
        cliName:[
          { required: true, message: '联系人不能为空', trigger: 'blur' },
        ],
        cliPhone:[
          { required: true, message: '联系人手机号不能为空', trigger: 'blur' },
        ],
        cliCategory:[
          { required: true, message: '客户等级不能为空', trigger: 'blur' },
        ]
      }
    }
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }else if (rowIndex === 5){
        return 'warning-row';
      }else if (rowIndex === 7){
        return 'success-row';
      }
      return '';
    },
    //查询全部
    fetchData(){
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        cliName: this.keyword.cliName,
        cliKh: this.keyword.cliKh,
        cliCategory: this.keyword.cliCategory
      }
      getList(params).then(res=>{
        let pageInfo = res.data;
        this.loading = false;
        this.clientList = res.data;
        this.clientList = pageInfo.list;
        this.total = pageInfo.total
      })
    },
    //导入文件成功提醒
    uploadExcelSuccess(){
      this.$message({
        type:"success",
        message:"上传成功"
      })
      this.dialogExcelVisible = false;
      this.fetchData();
    },
    //导入文件失败提醒
    uploadExcelError(){
      this.$message({
        type:"error",
        message:"上传失败"
      })
    },
    setRole(){
      findjs().then(res => {
        this.List = res.data;
      })
    },
    find(){
      findywy().then(res => {
        this.List1 = res.data;
      })
    },
    find31(){
      find3().then(res => {
        this.List3 = res.data;
      })
    },
    //导出按钮
    daochu(){
      this.$confirm('确定导出数据吗？','信息',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
        window.location.href="http://localhost:8088/tree/excel1"
      }).catch(()=>{
        this.$message({
          type:'info',
          message:'已取消导出数据'
        })
      })
    },
    //修改按钮
    handleEdit(row){
      this.activeName = 'up'
      this.client=row
    },
    //修改提交按钮
    update1(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.client.cliHome = this.a + this.b + this.c+this.client.cliHome
          up1(this.client).then((res) => {
            console.log("前端更新的对象===="+this.client)

            this.$message({
              type: 'success',
              message: '更新成功',
              duration: 1000,
            });
            this.fetchData()
            this.client = {}
            this.a = null
            this.b = null
            this.c = null
            this.activeName = 'first'
          })
        }else{
          this.$message({
            type: 'success',
            message: '更新失败',
            duration: 1000, })
        }
      })
    },
    //删除按钮
    handleDelete(row){
      this.$confirm('此操作将永久删除编号为['+row.cliId+']的数据?', { //this.idList这是前端多选框中选的数据
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let params={
          cliId:row.cliId
        }
        getdel(params
        ).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration:1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration:1000
        });
      });
    },

    //多选框
    handleSelectionChange(selectionRowArr) {
      this.ids=[];
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].cliId)
      }

    },
    //添加按钮
    openAddDialog(){
      this.activeName = 'second'
    },
    //重置按钮
    resetsearchForm(formName){
      this.$refs[formName].resetFields();
      this.keyword.cliCategory=null
      this.keyword.cliName=null
      this.fetchData()

    },
    //查询按钮
    search(){
      this.fetchData()
    },
    //分页
    handleSizeChange(val){
      this.pageSize = val; // 将当前页大小存起来，方便下一方法使用
      console.log(`每页 ${val} 条`);
      this.fetchData()
    },
    //分页
    handleCurrentChange(val){
      this.pageNum = val;
      console.log(`当前页: ${val}`);
      this.fetchData()
    },
    //批量删除按钮
    deletebatches(){
      this.$confirm('此操作将永久删除编号为['+this.ids+']的数据?', { //this.idList这是前端多选框中选的数据
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        let idStr = this.ids.join(",")
        let params={
          ids:idStr
        }
        delBatch(params
        ).then(res=>{
          this.$message({
            type: 'success',
            message: '删除成功!',
            duration:1000
          });
          this.fetchData()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration:1000
        });
      });
    },
    //导航页
    handleClick(tab, event) {
      console.log('tab===='+tab, 'event'+event);
    },
    //添加按钮
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
      console.log(this.client)
      console.log('submit!');
      this.client.cliHome = this.a + this.b + this.c+this.client.cliHome
      add1(this.client).then((res) => {
        this.$message({
          type: 'success',
          message: '添加成功',
          duration: 1000,
        });
        this.fetchData()
        this.client = {}
        this.a = null
        this.b = null
        this.c = null
        this.activeName = 'first'
      })
      }else{
            this.$message({
              type: 'success',
              message: '添加失败',
                duration: 1000, })
          }
      })
    },
    //添加取消按钮
    onlot(){
      this.fetchData()
      this.client = {}
      this.a=null
      this.b=null
      this.c=null
      this.d=null
      this.activeName='first'
    },
    //更新取消按钮
    onlot1(){
      this.fetchData()
      this.client = {}
      this.a=null
      this.b=null
      this.c=null
      this.d=null
      this.activeName='first'
      this.xianshi=true
    }
  },
//钩子函数，查全部
  created() {
    this.fetchData()
    this.setRole()
    this.find()
    this.find31()
  },
}
</script>
 <style>
 .el-table .warning-row {
   background: oldlace;
 }

 .el-table .success-row {
   background: #f0f9eb;
 }
 </style>
